<template>
    <div>
      <div class="infotopclass">
        <span>待审核商品信息列表</span>
        <div>
        </div>
      </div>
        <!-- 添加商品信息的对话框 -->
      <el-dialog title="添加商品信息" :visible.sync="dialogstoreinfoVisible" fullscreen @close="resetDialog">
        <el-form :model="storeinfoForm" :rules="storeinfoFormRules" ref="storeinfoFormRef">
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="product_name">
            <el-input  autocomplete="off" v-model="storeinfoForm.product_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品图片" :label-width="formLabelWidth" class="addimg" prop="product_img">
            <el-checkbox-group v-model="storeinfoForm.product_img" v-show="false"></el-checkbox-group>
            <img src="../../../assets/images/addPicture.jpg" alt="" ref="imgRef">
            <input type="file" style="display:none" ref="iptRef" accept="image/*" @change="oncoverChangeFN">
            <br>
          </el-form-item>
          <el-form-item label="商品价格" :label-width="formLabelWidth" prop="price">
            <el-input autocomplete="off" v-model="storeinfoForm.price" disabled></el-input>
          </el-form-item>
          <el-form-item label="商品详情" :label-width="formLabelWidth" prop="detail">
            <el-input autocomplete="off" v-model="storeinfoForm.detail" disabled></el-input>
          </el-form-item>
          <el-form-item label="库存" :label-width="formLabelWidth" prop="product_num">
            <el-input-number v-model="storeinfoForm.product_num" step-strictly disabled></el-input-number>
          </el-form-item>
          <el-form-item label="商品分类" :label-width="formLabelWidth" prop="category">
            <el-select  v-model="storeinfoForm.category" placeholder="请选择" disabled>
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.cate_name"
                :value="item.cate_name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogstoreinfoVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddstoreinfo">确 定</el-button>
        </div>
      </el-dialog>
      <el-table v-if="storeinfodata.length !== 0"
          :data="storeinfodata"
          style="width: 100%">
          <el-table-column
          type="index"
          label="序号">
          </el-table-column>
          <el-table-column
          prop="product_name"
          label="商品名称"
          width="180">
          <template slot-scope="scope">
            <img src="../../../assets/hot.png" alt="" v-if="scope.row.hot == 1" class="hoticon">
            <span>{{ scope.row.product_name }}</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="product_img"
            label="商品图片"
            width="180">
            <template slot-scope="scope">
              <img :src="scope.row.product_img" alt="" class="cover_img">
            </template>
          </el-table-column>
          <el-table-column
          prop="price"
          label="商品价格">
          <template slot-scope="scope">
              <span>￥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column
          label="商品详情">
          <template slot-scope="scope">
            <p class="store_detail">
              {{ scope.row.detail }}
            </p>
          </template>
          </el-table-column>
          <el-table-column
          prop="product_num"
          label="库存">
          </el-table-column>
          <el-table-column
          label="安全系数">
          <template slot-scope="scope">
            <p style="color:red;font-size:14px;" v-if="scope.row.security > 90">{{ scope.row.security}}% 安全</p>
            <p style="color:red;font-size:14px;" v-else-if="scope.row.security <= 90 && scope.row.security > 80">{{ scope.row.security}}% 较安全</p>
            <p style="color:red;font-size:14px;" v-else-if="scope.row.security <= 80 && scope.row.security > 75">{{ scope.row.security}}% 一般</p>
            <p style="color:red;font-size:14px;" v-else-if="scope.row.security <= 75 && scope.row.security > 70">{{ scope.row.security}}% 较危险</p>
            <p style="color:red;font-size:14px;" v-else-if="scope.row.security <= 70 && scope.row.security > 65">{{ scope.row.security}}% 危险</p>
            <p style="color:red;font-size:14px;" v-else>{{ scope.row.security}}% 非常危险</p>
          </template>
          </el-table-column>
          <el-table-column
          prop="category"
          label="商品分类">
          </el-table-column>
          <el-table-column
          label="发布者">
          <template slot-scope="{row}">
            <span v-if="row.Author"> <i class="el-icon-user"></i>{{row.Author}}</span>
            <span v-else><i class="el-icon-user-solid"></i>易儿宝商户</span>
          </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="150">
              <template slot-scope="scope">
                  <el-button
                  size="mini"
                  @click="handleEdit(scope.row)">查看详情</el-button><br>

                  <el-button
                  size="mini"
                  type="danger"
                  @click="isauditFn(scope.row)">通过审核</el-button><br>
                  <el-button
                  size="mini"
                  type="danger"
                  @click="isauditAddreasonFn(scope.row)">不通过审核</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div v-else>
        <img src="../../../assets/nothing.png" alt="" class="nothingimg">
      </div>
      <el-dialog
        title="请输入未通过审核原因"
        :visible.sync="addreasondialog"
        width="30%">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入未通过审核原因"
          v-model="addreasonForm.reason">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addreasondialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmReasonFN">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </template>

<script>
import { getstoreinfoauditAPI, isauditAPI, isAuditAddreasonAPI } from '@/api'
import imgUrl from '../../../assets/images/addPicture.jpg'
export default {
  name: 'user-storeinfo',
  data () {
    return {
      // 全部商品数据存储
      storeinfodata: [],
      // 对话框开关
      dialogstoreinfoVisible: false,
      formLabelWidth: '80px',
      chosecategory: {
        category: ''
      },
      storeinfoForm: {
        product_name: '',
        product_img: '',
        price: '',
        detail: '',
        product_num: '',
        category: ''
      },
      searchForm: {
        category: ''
      },
      // 商品未通过审核原因
      addreasonForm: {
        id: '',
        reason: ''
      },
      addreasondialog: false,
      // 获取的商品信息
      categoryList: [],
      // 表单验证规则
      storeinfoFormRules: {
        product_name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        product_img: [
          { required: true, message: '请上传商品图片', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入商品详情', trigger: 'blur' }
        ],
        product_num: [
          { required: true, message: '请输入商品库存', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        comment: [
          { required: true, message: '请输入商品介绍', trigger: 'blur' }
        ]
      },
      // 判断用户点击的是添加 还是 编辑 false为编辑 true 为添加
      isEdit: true,
      // 保存商品id - 编辑商品信息时传入
      storeID: ''

    }
  },
  mounted () {
    this.getstoreinfoList()
    this.categoryList = this.$store.state.category
  },
  methods: {
    // 获取全部商品信息
    async getstoreinfoList () {
      const { data } = await getstoreinfoauditAPI()
      if (data.status !== 0) return this.$message.error(data.message)
      this.storeinfodata = data.data
    },
    oncoverChangeFN (e) {
      const file = e.target.files
      if (file.length === 0) {
        this.storeinfoForm.product_img = null
        this.$refs.imgRef.setAttribute('src', imgUrl)
      } else {
        const fr = new FileReader()
        fr.readAsDataURL(file[0])
        fr.onload = (e) => {
          this.$refs.imgRef.setAttribute('src', e.target.result)
          this.storeinfoForm.product_img = e.target.result
        }
      }
    },
    // 编辑
    handleEdit (item) {
      this.storeID = item.id
      // 将isEdit 修改为false - 表示用户点击编辑
      this.isEdit = false
      this.dialogstoreinfoVisible = true
      this.$nextTick(() => {
        this.storeinfoForm.product_name = item.product_name
        this.storeinfoForm.product_img = item.product_img
        this.storeinfoForm.price = item.price
        this.storeinfoForm.detail = item.detail
        this.storeinfoForm.product_num = item.product_num
        this.storeinfoForm.category = item.category
        this.storeinfoForm.comment = item.comment
        this.$refs.imgRef.setAttribute('src', item.product_img)
      })
    },
    // 确定添加 / 修改按钮 -当isEdit=true时为新增 当isEdit=false时为编辑
    confirmAddstoreinfo () {
      this.dialogstoreinfoVisible = false
      this.getstoreinfoList()
    },
    // 关闭对话框 - 重置表单
    resetDialog () {
      this.$refs.storeinfoFormRef.resetFields()
      this.storeinfoForm.product_img = null
      this.$refs.imgRef.setAttribute('src', imgUrl)
    },
    // 通过审核
    async isauditFn (item) {
      const { data } = await isauditAPI(item.id)
      if (data.status !== 0) return this.$message.error(data.message)
      this.$message.success(data.message)
      this.getstoreinfoList()
    },
    isauditAddreasonFn (item) {
      this.addreasondialog = true
      this.addreasonForm.id = item.id
    },
    async confirmReasonFN () {
      if (this.addreasonForm.reason === '') {
        alert('请输入未通过审核原因')
      } else {
        const { data } = await isAuditAddreasonAPI(this.addreasonForm)
        if (data.status !== 0) return this.$message.error(data.message)
        this.$message.success(data.message)
        this.addreasondialog = false
        this.getstoreinfoList()
      }
    }
  }
}
</script>

  <style scoped>
    * {
      font-size: 10px;
    }
    .infotopclass{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    /* 添加图片的图片大小 */
    .addimg img {
      width: 150px;
      height: 130px;
    }
    /* 表格图片大小 */
    .cover_img {
      width: 50px;
      height: 50px;
    }
    .el-table {
      border-radius: 8px;
    }
    .el-pagination {
      position: absolute;
      bottom: 1px;
    }
    .hoticon {
      width: 18px;
      height: 18px;
      vertical-align:middle;
      margin-right: 2px;
    }
    .el-button {
      border-radius: 8px;
    }
    .store_detail {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      font-size: 12px;
      cursor:pointer;
    }
    .el-button {
      margin: 5px;
    }
    .nothingimg {
      width: 40%;
      height: 450px;
    }
  </style>
